<template>
    <div style="background-color: rgb(245, 245, 245);">
        <headers></headers>
        <div class="title">
            <div class="auto">首页 > 认证考试 > 个人账户信息 > 身份认证</div>
        </div>
        <div class="padding250" >
            <div class="auto content">
                <p class="titles">身份认证</p>
                <Form :label-width="85" class="forms" :rules="formValidate" ref="form" :model="form">
                    <FormItem label="身份证号" prop="idCard">
                        <Input placeholder="请输入您的身份证号" size="large" style="width: 44%;" v-model="form.idCard" :maxlength="18"/>
                    </FormItem>
                    <FormItem label="身份证照片">
                        <div class="upload_wrap">
                            <Upload ref="imgUp"
                                :show-upload-list="false"
                                :format="['jpg','jpeg','png']"
                                :headers="{Authorization:token}"
                                action="/base/file/upload"
                                :before-upload="beforeUpload"
                                :max-size="3072"
                                :on-exceeded-size="handleMaxSize"
                                :on-success="diploma1Success"
                                :on-format-error="formatError">
                                <div class="upload">
                                    <img class="showimg" :src="form.imgUp" v-if="form.imgUp !== '' && form.imgUp !== undefined"/>
                                    <Icon  v-else type="ios-add" size="110" color="#dbdbdb"/>
                                </div>
                            </Upload>
                            <p class="nams">身份证人面像</p>
                            <p class="tip">上传图片最大尺寸800px，大小为3M以内</p>
                        </div>
                        <div class="upload_wrap">
                            <Upload ref="imgDown"
                                :show-upload-list="false"
                                :format="['jpg','jpeg','png']"
                                :headers="{Authorization:token}"
                                action="/base/file/upload"
                                :max-size="3072"
                                :before-upload="beforeUpload"
                                :on-exceeded-size="handleMaxSize"
                                :on-success="diploma2Success"
                                :on-format-error="formatError">
                                <div class="upload">
                                    <img class="showimg" :src="form.imgDown" v-if="form.imgDown !== '' && form.imgDown !== undefined"/>
                                    <Icon v-else type="ios-add" size="110" color="#dbdbdb"/>
                                </div>
                            </Upload>
                            <p class="nams">身份证国徽面</p>
                            <p class="tip">上传图片最大尺寸800px，大小为3M以内</p>
                        </div>
                        <div class="upload_wrap">
                            <Upload ref="imgLive"
                                :show-upload-list="false"
                                :format="['jpg','jpeg','png']"
                                :headers="{Authorization:token}"
                                action="/base/file/upload"
                                :max-size="3072"
                                :before-upload="beforeUpload"
                                :on-exceeded-size="handleMaxSize"
                                :on-success="diploma3Success"
                                :on-format-error="formatError">
                                <div class="upload">
                                    <img class="showimg" :src="form.imgLive" v-if="form.imgLive !== '' && form.imgLive !== undefined"/>
                                    <Icon v-else type="ios-add" size="110" color="#dbdbdb"/>
                                </div>
                            </Upload>
                            <p class="nams">本人面部近照</p>
                            <p class="tip">上传图片最大尺寸800px，大小为3M以内</p>
                        </div>
                    </FormItem>
                    <Button type="primary" class="save" v-on:click="saveAndEdit">保存并返回</Button>
                    <Button type="primary" class="save" v-on:click="goBack" style="margin-left: 20px;width: 100px;background-color: #2d8cf0;border-color: #2d8cf0;">返回</Button>
                </Form>
            </div>
        </div>
        <Spin fix v-show="isSpinShow" >
            <div class="loader">
                <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
                <div class="font14">{{showTitle}}</div>
            </div>
        </Spin>
        <footers></footers>
    </div>
</template>
<style scoped lang="less" rel="stylesheet/less">
    /* 旋转效果 */
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    .showimg {
        display: inline-block;
        width: 200px;
        height: 110px;
        overflow: hidden;
        vertical-align: bottom;
    }
</style>
<script type="text/ecmascript-6">
    import {saveidentity, identiybody} from "../../http"
    import {getStore} from '../../storage'
    import headers from '../template/header'
    import footers from '../template/footer'

    export default {
        name: '',
        props: {},
        data() {
            return {
                showOrder: 'kaoshi',
                isSpinShow:false,
                showTitle: '加载中...',
                token:getStore('token'),
                formValidate: {
                    idCard: [{type: 'string',pattern : /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/ ,required: true, message: "身份证号格式不正确", trigger: "blur"}]
                },
                form: {
                    idCard: '',
                    imgUp: '',
                    imgDown: '',
                    imgLive: '',
                    name: this.$route.query.name,
                }
            };
        },
        methods: {
            goBack(){
                window.history.back();
            },
            beforeUpload(){
                this.showTitle = '文件上传中...'
                this.isSpinShow = true
            },
            handleMaxSize (file) {
                this.isSpinShow = false
                this.showTitle = '加载中...'
                this.$Notice.warning({
                    title: '证件上传失败',
                    desc: '您上传的图片超过3M，无法上传。'
                });
            },
            diploma1Success(response){
                this.isSpinShow = false
                this.showTitle = '加载中...'
                if(response.code === 200){
                    this.$set(this.form,'imgUp',response.data.fileUrl);
                }else{
                    this.$Notice.warning({
                        title:'证件上传失败',
                        desc:'上传不成功，请重新上传',
                        duration: 3,
                    });
                }
            },
            diploma2Success(response){
                this.isSpinShow = false
                this.showTitle = '加载中...'
                if(response.code === 200){
                    this.$set(this.form,'imgDown',response.data.fileUrl);
                }else{
                    this.$Notice.warning({
                        title:'证件上传失败',
                        desc:'上传不成功，请重新上传',
                        duration: 3,
                    });
                }
            },
            diploma3Success(response){
                this.isSpinShow = false
                this.showTitle = '加载中...'
                if(response.code === 200){
                    this.$set(this.form,'imgLive',response.data.fileUrl);
                }else{
                    this.$Notice.warning({
                        title:'证件上传失败',
                        desc:'上传不成功，请重新上传',
                        duration: 3,
                    });
                }
            },
            formatError(){
                this.isSpinShow = false
                this.showTitle = '加载中...'
                this.$Notice.warning({
                    title:"证件上传失败",
                    desc:"图片格式错误，请上传图片",
                    duration: 3,
                });
            },
            saveAndEdit(){
                if(!this.form.imgUp){
                    this.$Notice.warning({
                        title:'认证提示',
                        desc:'请上传身份证人面像',
                        duration: 3,
                    });
                    return
                }
                if(!this.form.imgDown){
                    this.$Notice.warning({
                        title:'认证提示',
                        desc:'请上传身份证国徽面',
                        duration: 3,
                    });
                    return
                }
                if(!this.form.imgLive){
                    this.$Notice.warning({
                        title:'认证提示',
                        desc:'请上传本人面部近照',
                        duration: 3,
                    });
                    return
                }
                this.attestation()
                this.editUser()
            },
            //更新
            editUser(){
                let quey = {
                    idCard: this.form.idCard,
                    cardNoImg: this.form.imgUp,
                    cardNoImg2: this.form.imgDown
                }
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        saveidentity(quey).then(res => {
                            /*if(res.code == 200){
                                this.$Notice.success({
                                    title: '认证提示',
                                    desc: '操作成功',
                                    duration: 3,
                                });
                                this.$router.push({
                                    name: 'kaoshiAccount'
                                })
                            }*/
                        })
                    }
                })
            },
            //认证
            attestation(){
                let quey = {
                    imagePath: this.form.imgLive,
                    idCardNum: this.form.idCard,
                    name: this.form.name,
                    identityflg: 1
                }
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        identiybody(quey).then(res => {
                            console.info(res)
                            if(res.code == 200){
                                this.$Notice.success({
                                    title: '认证提示',
                                    desc: '操作成功',
                                    duration: 3,
                                });
                                this.$router.push({
                                    name: 'kaoshiAccount'
                                })
                            }else{
                                this.$Notice.warning({
                                    title: '认证提示',
                                    desc: res.info,
                                    duration: 3,
                                });
                            }
                        })
                    }
                })
            }
        },
        created() {

        },
        components: {
            headers,
            footers
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
    .title {
        font-size: 14px;
        color: #fff;
        height: 60px;
        line-height: 60px;
        background-color: #2F261E;
        text-align: left;
    }

    .content {
        background-color: #fff;
        margin-top: 30px;
        padding: 40px;
        text-align: left;

        .titles {
            font-size: 20px;
            color: #000;
            margin-bottom: 30px;
        }

        .no {
            font-size: 14px;
            color: #666;
            border-bottom: 1px solid #666;
            vertical-align: sub;
        }

        .renzheng {
            border: 1px solid #B2936B;
            color: #B2936B;
            margin-left: 20px;
        }
    }

    .upload_wrap {
        display: inline-block;
        margin-right: 30px;

        .upload {
            border: 1px dashed #E1E1E1;
            background-color: #f9f9f9;
            width: 200px;
            height: 110px;
            text-align: center;
        }

        .nams, .tip {
            color: #FF0000;
            font-size: 12px;
            text-align: center;
            margin: 0;
        }
    }

    .save {
        background-color: #B2936B;
        color: #fff;
        height: 50px;
        width: 200px;
        font-size: 16px;
        margin-left: 80px;
    }

    .header {
        font-size: 24px;
        color: #333;
        text-align: center;
        height: 30px;
        line-height: 30px;
    }

    .titles {
        font-size: 18px;
        color: #333;
        margin: 30px 0;
    }

    .notice {
        font-size: 16px;
        color: #666;
        text-align: center;
    }

    .clearfix {
        .one {
            margin-bottom: 100px;
        }

        .three {
            margin-bottom: 80px;
        }

        .middle {
            margin: 0 50px;
            width: 300px;

            img {
                margin-top: 30px;
            }

            .two {
                margin-bottom: 10px;

                p {
                    display: inline-block;
                    width: 200px;
                    vertical-align: middle;
                }
            }
        }

        .step {
            font-size: 14px;
            color: #666;

            span {
                display: inline-block;
                background-color: #C09972;
                width: 32px;
                height: 32px;
                line-height: 32px;
                color: #fff;
                font-size: 20px;
                border-radius: 50%;
                text-align: center;
                margin-right: 10px;
            }
        }
    }
</style>
